<template>
  <div v-show="article.view">
    <el-page-header
      icon="el-icon-arrow-left"
      title="返回"
      @back="goBack"
      :content="article.title"
    >
    </el-page-header>
    <el-container>
    
      <el-main>
        <p v-for="paragraph in article.paragraphs">&emsp;&emsp;{{ paragraph }}</p>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  
  props: {
    article: {
      view: Boolean,
      title: String,
      paragraphs: Array
    },
  },
  setup (props) {
    const goBack = () => {
      props.article.view = false;
    }
    
    return {
      goBack
    }
  }
})
</script>

<style scoped>
.el-page-header__title {
  font-size: 16px;
}
p {
  line-height: 36px;
}
.el-main {
  padding-top: 27px;
  margin-top: 21px;
  padding-left: 40px;
  padding-right: 40px;
  background-color: #ddffcc;
  border-radius: 30px;
}
</style>

<style>
  .el-page-header__title {
    font-size: 16px;
  }
</style>
